<template>
    <div>
        <h1>toRaw</h1>
        <h1>{{obj.name}}</h1>
        <h1>{{obj.age}}</h1>
        <hr>
        <h1>markRaw</h1>
        <h1>{{obj3.age}}</h1>
        <input type="text" v-model="obj3.age">
    </div>
</template>

<script lang="ts">
import { defineComponent,toRaw ,reactive,markRaw} from 'vue'

export default defineComponent({
    setup () {
        const obj = reactive({
            name:'lily',
            age:19
        })
        console.log(obj);
        const obj2 = toRaw(obj);
        console.log(obj2);
        const obj3 = markRaw({
            name:'iu',
            age:19,
        });
        return {
            obj,
            obj2,
            obj3,
        }
    }
})
</script>

<style scoped>

</style>